<template>
  <view class="teacher-list-container">
    <!-- 顶部搜索区域 -->
    <view class="search-section">
      <view class="search-header">
        <u-search 
          v-model="searchKeyword"
          placeholder="搜索教员姓名或科目"
          :show-action="true"
          action-text="搜索"
          bg-color="white"
          border-color="#e4e7ed"
          @search="handleSearch"
          @custom="handleSearch"
          :custom-style="{ borderRadius: '50rpx' }"
        ></u-search>
      </view>
      
      <!-- 年级筛选 -->
      <view class="grade-filter">
        <scroll-view scroll-x="true" class="grade-scroll">
          <view class="grade-list">
            <view 
              class="grade-item"
              :class="{ active: currentGrade === index }"
              v-for="(grade, index) in gradeList" 
              :key="index"
              @click="handleGradeChange(index)"
            >
              {{ grade }}
            </view>
          </view>
        </scroll-view>
      </view>
      
      <!-- 科目筛选 -->
      <view class="filter-tags">
        <scroll-view scroll-x="true" class="subject-scroll">
          <view class="subject-list">
            <view 
              class="subject-item"
              :class="{ active: currentSubject === index }"
              v-for="(subject, index) in subjectList" 
              :key="index"
              @click="handleSubjectChange(index)"
            >
              {{ subject }}
            </view>
          </view>
        </scroll-view>
        <view class="filter-icon" @click="showFilterModal = true">
          <u-icon name="options" size="20" color="#3cc51f"></u-icon>
        </view>
      </view>
    </view>
    
    <!-- 教员列表 -->
    <view class="teacher-list">
      <view 
        class="teacher-card"
        v-for="teacher in teacherList"
        :key="teacher.id"
        @click="goToDetail(teacher.id)"
      >
        <!-- 教员头像和基本信息 -->
        <view class="teacher-header">
          <view class="avatar-section">
            <u-avatar :src="teacher.avatar" size="80"></u-avatar>
            <view class="online-badge" v-if="teacher.isOnline">
              <text class="badge-text">在线</text>
            </view>
          </view>
          <view class="teacher-info">
            <view class="name-section">
              <text class="teacher-name">{{ teacher.name }}</text>
              <view class="verified-badge" v-if="teacher.verified">
                <u-icon name="checkmark-circle-fill" size="16" color="#3cc51f"></u-icon>
              </view>
            </view>
            <text class="teacher-school">{{ teacher.school }}</text>
            <view class="rating-section">
              <u-rate 
                :value="teacher.rating" 
                size="14" 
                disabled
                active-color="#FFD700"
              ></u-rate>
              <text class="rating-text">{{ teacher.rating }} ({{ teacher.reviewCount }}评价)</text>
            </view>
          </view>
          <view class="price-section">
            <text class="price">¥{{ teacher.hourlyRate }}</text>
            <text class="price-unit">/时</text>
          </view>
        </view>
        
        <!-- 科目标签 -->
        <view class="subjects-section">
          <u-tag 
            v-for="subject in teacher.subjects" 
            :key="subject"
            :text="subject" 
            size="mini" 
            type="primary"
            plain
            :custom-style="{ 
              marginRight: '12rpx', 
              marginBottom: '8rpx',
              backgroundColor: '#f0f9ff',
              borderColor: '#3cc51f',
              color: '#3cc51f'
            }"
          ></u-tag>
        </view>
        
        <!-- 教员描述 -->
        <view class="description-section">
          <text class="description-text">{{ teacher.description }}</text>
        </view>
        
        <!-- 底部信息和操作 -->
        <view class="teacher-footer">
          <view class="experience-info">
            <u-icon name="order" size="28" color="#999"></u-icon>
            <text class="experience-text">{{ teacher.experienceYears }}年经验</text>
          </view>
          <view class="action-buttons">
            <u-button 
              type="primary" 
              size="mini"
			  class="concat-text"
              plain
              :custom-style="{ 
                borderRadius: '20rpx',
                marginRight: '16rpx',
                minWidth: '120rpx'
              }"
              @click.stop="contactTeacher(teacher)"
            >
              <u-icon name="chat" size="32" :custom-style="{ marginRight: '8rpx' }"></u-icon>
              联系
            </u-button>
            <u-button 
              type="primary" 
              size="mini"
              :custom-style="{ 
                borderRadius: '20rpx',
                backgroundColor: '#3cc51f',
                borderColor: '#3cc51f',
                minWidth: '120rpx'
              }"
              @click.stop="bookTeacher(teacher)"
            >
              <u-icon name="calendar" size="32" :custom-style="{ marginRight: '8rpx' }"></u-icon>
              预约
            </u-button>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore">
      <u-loadmore :status="loadStatus" @loadmore="loadMore"></u-loadmore>
    </view>
    
    <!-- 筛选弹窗 -->
    <u-popup v-model="showFilterModal" mode="bottom" border-radius="20">
      <view class="filter-modal">
        <view class="modal-header">
          <text class="modal-title">筛选条件</text>
          <u-icon name="close" @click="showFilterModal = false" size="24"></u-icon>
        </view>
        
        <view class="filter-content">
          <!-- 价格区间 -->
          <view class="filter-group">
            <text class="group-title">价格区间</text>
            <view class="price-range">
              <u-slider 
                v-model="priceRange" 
                :min="0" 
                :max="500" 
                range
                active-color="#3cc51f"
              ></u-slider>
              <view class="range-display">
                <text class="range-text">¥{{ priceRange[0] }} - ¥{{ priceRange[1] }}</text>
              </view>
            </view>
          </view>
          
          <!-- 教学经验 -->
          <view class="filter-group">
            <text class="group-title">教学经验</text>
            <view class="experience-options">
              <view 
                class="option-item"
                :class="{ active: experienceFilter === item.value }"
                v-for="item in experienceOptions"
                :key="item.value"
                @click="experienceFilter = item.value"
              >
                {{ item.label }}
              </view>
            </view>
          </view>
          
          <!-- 评分筛选 -->
          <view class="filter-group">
            <text class="group-title">最低评分</text>
            <view class="rating-filter">
              <u-rate 
                v-model="ratingFilter" 
                allow-half
                active-color="#FFD700"
              ></u-rate>
              <text class="rating-value">{{ ratingFilter }}分以上</text>
            </view>
          </view>
        </view>
        
        <view class="modal-footer">
          <u-button 
            type="info" 
            plain 
            @click="resetFilter"
            :custom-style="{ 
              borderRadius: '25rpx',
              marginRight: '20rpx',
              flex: '1'
            }"
          >
            重置
          </u-button>
          <u-button 
            type="primary" 
            @click="applyFilter"
            :custom-style="{ 
              borderRadius: '25rpx',
              backgroundColor: '#3cc51f',
              borderColor: '#3cc51f',
              flex: '1'
            }"
          >
            确定
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getTeacherList } from '@/api/teacher'

export default {
  data() {
    return {
      searchKeyword: '',
      currentGrade: 0,
      gradeList: ['全部', '小学', '初中', '高中', '大学', '成人'],
      currentSubject: 0,
      subjectList: ['全部', '数学', '英语', '物理', '化学', '语文', '生物', '历史', '地理'],
      teacherList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      hasMore: true,
      loadStatus: 'loadmore',
      loading: false,
      showFilterModal: false,
      priceRange: [50, 200],
      experienceFilter: 'all',
      experienceOptions: [
        { label: '不限', value: 'all' },
        { label: '1年以上', value: '1' },
        { label: '3年以上', value: '3' },
        { label: '5年以上', value: '5' }
      ],
      ratingFilter: 0
    }
  },
  
  onLoad(options) {
    if (options.keyword) {
      this.searchKeyword = decodeURIComponent(options.keyword)
    }
    this.loadTeachers(true)
  },
  
  onPullDownRefresh() {
    this.loadTeachers(true)
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1000)
  },
  
  methods: {
    async loadTeachers(refresh = false) {
      if (this.loading) return
      
      if (refresh) {
        this.currentPage = 1
        this.teacherList = []
        this.hasMore = true
      }
      
      this.loading = true
      
      try {
        // 构建查询参数
        const params = {
          page: this.currentPage,
          size: this.pageSize
        }
        
        // 搜索关键词
        if (this.searchKeyword) {
          params.keyword = this.searchKeyword
        }
        
        // 年级筛选
        if (this.currentGrade > 0) {
          params.grade = this.gradeList[this.currentGrade]
        }
        
        // 科目筛选
        if (this.currentSubject > 0) {
          params.subject = this.subjectList[this.currentSubject]
        }
        
        // 价格筛选
        params.minPrice = this.priceRange[0]
        params.maxPrice = this.priceRange[1]
        
        // 经验筛选
        if (this.experienceFilter !== 'all') {
          params.minExperience = parseInt(this.experienceFilter)
        }
        
        // 评分筛选
        if (this.ratingFilter > 0) {
          params.minRating = this.ratingFilter
        }
        
        const response = await getTeacherList(params)
        
        if (response.code === 200 && response.data) {
          const { list, total, page } = response.data
          
          // 处理数据格式
          const formattedList = list.map(item => ({
            id: item.id,
            name: item.realName || '教员',
            avatar: item.avatarUrl || '/static/icons/default-avatar.png',
            school: item.school || '未知学校',
            subjects: item.subjects || [],
            description: item.intro || '暂无介绍',
            hourlyRate: item.hourlyRate || 0,
            rating: parseFloat(item.rating) || 0,
            reviewCount: item.reviewCount || 0,
            experienceYears: item.experienceYears || 0,
            isOnline: item.isOnline || false,
            verified: item.verified || false
          }))
          
          if (refresh) {
            this.teacherList = formattedList
          } else {
            this.teacherList = [...this.teacherList, ...formattedList]
          }
          
          this.total = total
          this.currentPage = page
          
          // 判断是否还有更多数据
          this.hasMore = this.teacherList.length < total
          
          if (!this.hasMore) {
            this.loadStatus = 'nomore'
          }
        }
      } catch (error) {
        console.error('加载教员列表失败:', error)
        uni.showToast({
          title: error.message || '加载失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    
    handleSearch() {
      this.loadTeachers(true)
    },
    
    handleGradeChange(index) {
      this.currentGrade = index
      this.loadTeachers(true)
    },
    
    handleSubjectChange(index) {
      this.currentSubject = index
      this.loadTeachers(true)
    },
    
    loadMore() {
      if (this.loadStatus === 'loading' || !this.hasMore) return
      
      this.loadStatus = 'loading'
      this.currentPage++
      this.loadTeachers(false)
      
      setTimeout(() => {
        this.loadStatus = this.hasMore ? 'loadmore' : 'nomore'
      }, 500)
    },
    
    goToDetail(teacherId) {
      uni.navigateTo({
        url: `/pages/teacher/detail?id=${teacherId}`
      })
    },
    
    contactTeacher(teacher) {
      uni.navigateTo({
        url: `/pages/message/chat?teacherId=${teacher.id}&teacherName=${encodeURIComponent(teacher.name)}`
      })
    },
    
    bookTeacher(teacher) {
      uni.navigateTo({
        url: `/pages/order/book?teacherId=${teacher.id}`
      })
    },
    
    resetFilter() {
      this.priceRange = [50, 200]
      this.experienceFilter = 'all'
      this.ratingFilter = 0
    },
    
    applyFilter() {
      this.showFilterModal = false
      this.loadTeachers(true)
    }
  }
}
</script>

<style lang="scss" scoped>
.teacher-list-container {
  background: #f8f9fa;
  min-height: 100vh;
}

.search-section {
  background: white;
  padding: 30rpx;
  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
  
  .search-header {
    margin-bottom: 24rpx;
  }
  
  .grade-filter {
    margin-bottom: 24rpx;
    
    .grade-scroll {
      width: 100%;
    }
    
    .grade-list {
      display: flex;
      white-space: nowrap;
    }
    
    .grade-item {
      padding: 12rpx 32rpx;
      margin-right: 16rpx;
      background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
      border-radius: 30rpx;
      font-size: 28rpx;
      color: #666;
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      
      &.active {
        background: linear-gradient(135deg, #3cc51f 0%, #2fa01b 100%);
        color: white;
        box-shadow: 0 4rpx 12rpx rgba(60, 197, 31, 0.3);
        transform: translateY(-2rpx);
      }
    }
  }
  
  .filter-tags {
    display: flex;
    align-items: center;
    
    .subject-scroll {
      flex: 1;
      margin-right: 20rpx;
    }
    
    .subject-list {
      display: flex;
      white-space: nowrap;
    }
    
    .subject-item {
      padding: 10rpx 24rpx;
      margin-right: 16rpx;
      background: #f5f5f5;
      border-radius: 30rpx;
      font-size: 26rpx;
      color: #666;
      transition: all 0.3s ease;
      
      &.active {
        background: #3cc51f;
        color: white;
      }
    }
    
    .filter-icon {
      width: 60rpx;
      height: 60rpx;
      background: #f5f5f5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.teacher-list {
  padding: 30rpx;
}

.teacher-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
  
  &:active {
    transform: scale(0.98);
  }
  
  .teacher-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24rpx;
    
    .avatar-section {
      position: relative;
      margin-right: 24rpx;
      
      .online-badge {
        position: absolute;
        top: -8rpx;
        right: -8rpx;
        background: #19be6b;
        border-radius: 20rpx;
        padding: 4rpx 12rpx;
        
        .badge-text {
          font-size: 20rpx;
          color: white;
        }
      }
    }
    
    .teacher-info {
      flex: 1;
      
      .name-section {
        display: flex;
        align-items: center;
        margin-bottom: 8rpx;
        
        .teacher-name {
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
          margin-right: 8rpx;
        }
      }
      
      .teacher-school {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 12rpx;
      }
      
      .rating-section {
        display: flex;
        align-items: center;
        
        .rating-text {
          font-size: 24rpx;
          color: #999;
          margin-left: 12rpx;
        }
      }
    }
    
    .price-section {
      text-align: right;
      
      .price {
        font-size: 40rpx;
        font-weight: bold;
        color: #3cc51f;
      }
      
      .price-unit {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .subjects-section {
    margin-bottom: 20rpx;
    display: flex;
    flex-wrap: wrap;
  }
  
  .description-section {
    margin-bottom: 24rpx;
    
    .description-text {
      font-size: 28rpx;
      color: #666;
      line-height: 1.6;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
  
  .teacher-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .experience-info {
      display: flex;
      align-items: center;
      
      .experience-text {
        font-size: 24rpx;
        color: #999;
        margin-left: 8rpx;
      }
    }
    
    .action-buttons {
      display: flex;
      align-items: center;
    }
	.concat-text{
	    color: #333 !important;
	}
  }
}

.load-more {
  padding: 40rpx;
}

.filter-modal {
  padding: 40rpx 30rpx;
  max-height: 80vh;
  
  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .modal-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .filter-content {
    .filter-group {
      margin-bottom: 40rpx;
      
      .group-title {
        display: block;
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 24rpx;
      }
      
      .price-range {
        .range-display {
          text-align: center;
          margin-top: 20rpx;
          
          .range-text {
            font-size: 28rpx;
            color: #3cc51f;
            font-weight: 500;
          }
        }
      }
      
      .experience-options {
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;
        
        .option-item {
          padding: 16rpx 32rpx;
          background: #f5f5f5;
          border-radius: 30rpx;
          font-size: 28rpx;
          color: #666;
          transition: all 0.3s ease;
          
          &.active {
            background: #3cc51f;
            color: white;
          }
        }
      }
      
      .rating-filter {
        display: flex;
        align-items: center;
        
        .rating-value {
          font-size: 28rpx;
          color: #666;
          margin-left: 20rpx;
        }
      }
    }
  }
  
  .modal-footer {
    display: flex;
    gap: 20rpx;
    margin-top: 40rpx;
    padding-top: 20rpx;
    border-top: 1rpx solid #f0f0f0;
  }
}
</style> 